<template>
  <div class="container">
    <div class="mask"
         v-if="isShow"
         @click="closeMask"></div>
    <div class="modalbox"
         v-if="isModal">
      <div class="content">当前可预约次数剩余 <span class="red"> {{fixnum}}</span> 次 是否继续？</div>
      <div class="left"
           @click="cannelBtn">我再想想</div>
      <div class="right">再次预约</div>
      <view class="section">
        <picker mode="date"
                :value="date"
                :start="currentdate"
                :end="end_time"
                @change="bindDateChange">
          <div class="picker">当前选择: {{date}}</div>
        </picker>
      </view>
    </div>
    <scroll-view :scroll-y="true"
                 @scroll="scroll"
                 :style="{'height': '90%'}">
      <div class="contentbox">
        <div class="top-box">
          <p class="p1">
            <span class="s1">预约编号：{{list.order_sn}}</span>
            <span class="s2"
                  v-if="list.order_status== 1">正在预约</span>
            <span class="s2"
                  v-if="list.order_status== 2">预约关闭</span>
          </p>
        </div>
        <div class="center-box">
          <div class="left">
            <img :src="imgUrl+list.project_image"
                 alt>
          </div>
          <div class="right">
            <p class="p1">{{list.project_name}}</p>
            <p class="p2">
              <span class="s1"
                    v-if="list.order_type_status == 1">预约价</span>
              <!-- <span class="s1" v-if="list.is_activity == true">抢购价&nbsp;¥&nbsp;</span> -->
              <span class="s2">
                <span class="s3">¥</span>
                {{list.project_price}}
              </span>
            </p>
          </div>
        </div>
      </div>
      <div class="bottom-box"
           @click="toHostipal(hospital.id)">
        <div class="left-box">
          <div class="img-box">
            <img :src="imgUrl+hospital.logo"
                 alt>
          </div>
        </div>
        <div class="right-box">
          <p class="p1">
            <span class="s1">{{hospital.name}}</span>
            <span class="s2"
                  v-if="hospital.tags_name && hospital.tags_name!==null">
              {{hospital.tags_name}}
              <span class="v-tip">v</span>
            </span>
          </p>
          <p class="p2">
            <img src="https://h5.ameimeika.com/mp_images/jiaoyi/weizhi@2x.png"
                 alt
                 class="loc_image">
            <span class="s2">{{hospital.address}}</span>
          </p>
        </div>
      </div>
      <div v-if="list.doctors_status !==1 && doctorList.length>0">
        <doctorList :doctorList="doctorList"
                    @click="doctorDetail"></doctorList>
      </div>
      <ul class="ul"
          v-if="list.doctors_status == 1">
        <li class="item">
          <span class="left">项目咨询医生</span>
          <span class="right">
            {{doctorList[0].name}}
            <img :src="imgUrl+doctorList[0].image"
                 alt
                 class="docImg">
          </span>
        </li>
      </ul>
      <div class="msg-box">
        <ul>
          <li>
            <span class="sL">预约姓名</span>
            <span class="sR"
                  v-if="list.name !==null">{{list.name}}</span>
          </li>
          <li class="bottomLine">
            <span class="sL">预约日期</span>
            <span class="sR"
                  v-if="list.order_time!==0">{{list.order_time}}</span>
          </li>
          <li>
            <span class="sL">推荐人</span>
            <span class="sR">{{list.server_name}}</span>
          </li>
          <li>
            <span class="sL">联系方式</span>
            <span class="sR">{{list.server_phone}}</span>
          </li>
        </ul>
      </div>
      <div class="msg-box">
        <ul>
          <li>
            <span class="sL"
                  v-if="list.order_type_status == 1">预约价</span>
            <!-- <span class="sL" v-if="list.is_activity==true">抢购价</span> -->
            <span class="sL"
                  v-if="list.order_type_status == 2">订单总价</span>
            <span class="sR color">¥{{list.project_price}}</span>
          </li>
          <li v-if="list.credit > 0">
            <span class="sL">积分抵扣</span>
            <span class="sR color1">-{{list.credit}}</span>
          </li>
          <li v-if="list.ticket_price >0">
            <span class="sL">优惠</span>
            <span class="sR color">
              -
              <span class="item1">¥</span>
              {{list.ticket_price}}
            </span>
          </li>
          <li class>
            <span class="sL">合计</span>
            <span class="sR color"
                  v-if="list.project_allprice > 0">¥{{list.project_allprice}}</span>
            <span class="sR color"
                  v-if="list.project_allprice == 0">¥0</span>
          </li>
          <li v-if="list.pay_status == 1 && list.project_order_id == 0">
            <span class="sL"></span>
            <span class="sR color2">
              已退款
              <span class="item">¥</span>
              {{list.project_allprice}}
            </span>
          </li>
        </ul>
      </div>
      <div class="zhanwei"></div>
    </scroll-view>
    <div class="footer-box">
      <div class="dt msgDataMsg">
        <p class="p1">预约单提交日期</p>
        <p class="p2">{{list.created_at}}</p>
      </div>
      <div class="right">
        <!-- 客服按钮 -->
        <div class="item itembtn">
          <button class="btn service"
                  @tap="to_service()"></button>
        </div>
        <!-- 评价按钮 -->
        <div class="item"
             v-if="list.comment_status == 1 && list.project_order_id ==0">
          <button @click="to_pinglun(list.id)"
                  class="btn "
                  :class="{hidden:is_hidden}">评价</button>
        </div>
        <!-- 查看订单按钮 -->
        <div class="item">
          <button @click="checkOrder(list.project_order_id)"
                  class="btn"
                  v-if="list.project_order_id !==0">查看订单</button>
        </div>
        <!-- 修改时间按钮 -->
        <div class="item fixtime">
          <button class="btn"
                  v-if="list.is_modify_time == 1 && list.order_status ==1"
                  @click="fixtime(1)">修改时间</button>
          <button class="btn morebooking"
                  v-if="list.is_modify_time == 1 && list.order_status ==2"
                  @click="fixtime(2)">再次预约</button>
        </div>

        <!-- 更多按钮 -->
        <div class="item moreDV"
             v-if="list.else_status == 1 && list.project_order_id ==0">
          <button @click="moreEvent"
                  class="btn more"
                  :class="{hidden:is_hidden}">更多</button>
          <div class="more-box"
               v-if="isMore">
            <button class="dv dv1"
                    @tap="to_service()">退款</button>
            <div class="dv"
                 @click="delBooking(list.id)">删除</div>
          </div>
        </div>
        <!-- 删除按钮         -->
        <div class="item"
             v-if="list.order_status == 2 && list.else_status == 2 && list.project_order_id ==0">
          <button @click="delBooking(list.id)"
                  class="btn"
                  :class="{hidden:is_hidden}">删除</button>
        </div>
        <!-- 退款按钮 -->
        <div class="item"
             v-if="list.pay_status == 2 && list.else_status == 2 && list.order_status == 2 && list.project_order_id ==0">
          <button @click="refundEvent(list.id)"
                  class="btn refund"
                  @tap="to_service()">退款</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import doctorList from "@/components/doctorList/doctorList";
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      currentTab: 0,
      imgUrl: "https://img.ameimeika.com/",
      ImgBaseUrl: "https://h5.ameimeika.com/mp_images/",
      project_id: "",  //预约单id
      list: [],
      is_hidden: false,
      server_phone: "",
      doctorList: "",
      isMore: false, //更多按钮弹窗控制
      hospital: "",
      currentdate: "",
      end_time: "",
      date: "",
      isShow: false,
      isModal: false,
      fixnum: "",
      order_id: '',  //订单id
      mark: "",//修改时间或再次预约
    };
  },
  onLoad: function (options) {
    Object.assign(this.$data, this.$options.data());
    wx.setNavigationBarTitle({
      title: "预约详情"
    });
    this.currentdate = "";
    this.end_time = "";
    this.date = "";
    this.getNowFormatDate();
    if (options.booking_id) {
      //预约列表传过来的
      // options.booking_id = 1779;
      this.project_id = options.booking_id;
      this.getData();
    } else if (options.str) {
      this.project_id = options.str; //从商城预约后传过来的项目id
      this.getData();
    }
    this.server_phone = wx.getStorageSync("user_data").referee_phone;
  },
  onShow () {
    this.currentdate = "";
    this.end_time = "";
    this.date = "";
    this.getNowFormatDate();
    this.getData();
  },
  components: {
    doctorList
  },
  methods: {
    to_service () {
      common.to_service()
    },
    //预约详情
    getData () {
      common.mmk_Loading(0);
      common.fly_post(
        "api/v4_2/order_project/appoint_show",
        {
          id: this.project_id
        },
        msg => {
          common.mmk_Loading(1);
          let res = msg.data;
          if (res.status_code == 0) {
            this.list = res.data;
            this.hospital = res.data.hospital;
            if (res.data.doctors.length !== 0) {
              this.doctorList = res.data.doctors;
            }
            let status = res.data.order_status;
            if (status == 2) {
              this.is_hidden = false;
            } else {
              this.is_hidden = true;
            }
            if (this.list.order_time !== 0 && this.list.created_at !== 0) {
              this.list.order_time = new Date(
                this.list.order_time * 1000
              ).Format("yyyy-MM-dd");
              this.list.created_at = new Date(
                this.list.created_at * 1000
              ).Format("yyyy/MM/dd");
            }
            this.fixnum = res.data.edit_count; //预约时间修改次数
            this.order_id = res.data.project_order_id  //订单id
          } else {
            common.mmk_Loading(2, res.message);
            return false;
          }
        }
      );
    },
    // 联系客服
    call () {
      wx.makePhoneCall({
        phoneNumber: "4006711314"
      });
    },
    //评论
    to_pinglun (id) {
      wx.navigateTo({
        url: `/pages/package_projects/evaluation_booking/main?id=${id}`
      });
    },
    //删除预约单
    delBooking (value) {
      // this.booking_id = value;
      wx.showModal({
        title: "",
        content: "确认删除预约单？",
        success: function (res) {
          if (res.confirm) {
            common.mmk_Loading(0);
            common.fly_post(
              "api/v4_2/order_project/appoint_del",
              {
                id: value
              },
              msg => {
                common.mmk_Loading(1);
                let res = msg.data;
                if (res.status_code == 0) {
                  wx.showToast({
                    title: "删除成功", //提示的内容,
                    icon: "success", //图标,
                    duration: 2000, //延迟时间,
                    mask: true, //显示透明蒙层，防止触摸穿透,
                    success: res => {
                      setTimeout(() => {
                        wx.navigateBack({
                          delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
                        });
                      }, 1500);
                    }
                  });
                } else {
                  common.mmk_Loading(2, res.message);
                  return false;
                }
              }
            );
          } else {
          }
        }
      });
    },
    moreEvent () {
      this.isMore = !this.isMore;
    },
    doctorDetail () {
      this.$refs.mychild.toDetail();
    },
    toHostipal (e) {
      wx.navigateTo({ url: `/pages/package_projects/hospital_detail/main?hos_id=${e}` });
    },
    //跳订单
    checkOrder (e) {
      wx.navigateTo({ url: `/pages/package_mine/project_order_detail/main?order_id=${e}` });
    },
    fixtime (e) {
      this.mark = e;
      if (this.fixnum == 0) {
        wx.showModal({
          title: "",
          content: "三次预约机会已用完可联系客服进行退款",
          showCancel: false,
          confirmText: "我知道了",
          confirmColor: "#FF383E",
          success (res) {
            if (res.confirm) {
            } else if (res.cancel) {
            }
          }
        });
      } else {
        this.isShow = true;
        this.isModal = true;
      }
    },
    bindDateChange (e) {
      this.date = e.target.value;
      // console.log(this.date);
      this.list.order_time = this.date;
      // console.log(this.list.order_time);
      this.comfirebtn();
      this.commitOrder();
    },
    comfirebtn () {
      this.isModal = false;
      this.isShow = false;
    },
    cannelBtn () {
      this.comfirebtn();
    },

    closeMask () {
      this.comfirebtn();
    },
    // 修改预约时间
    getNowFormatDate () {
      //获取当前日期
      var start_year = new Date().getFullYear() - 0;
      var start_month = new Date().getMonth() - 0 + 1;
      var start_strDate = new Date().getDate() - 0;
      var end_year = new Date().getFullYear() - 0;
      var end_month = new Date().getMonth() - 0 + 3;
      var end_strDate = new Date().getDate() - 0;
      start_month = start_month > 10 ? start_month : "0" + start_month;
      start_strDate = start_strDate > 10 ? start_strDate : "0" + start_strDate;
      if (end_month > 12) {
        end_year = end_year + 1;
        end_month = end_month - 12;
      }
      end_month = end_month > 10 ? end_month : "0" + end_month;
      end_strDate = end_strDate > 10 ? end_strDate : "0" + end_strDate;
      this.currentdate = `${start_year}-${start_month}-${start_strDate}`;
      this.end_time = `${end_year}-${end_month}-${end_strDate}`;
    },
    //下单
    commitOrder () {
      let api = "api/v4_2/project/appoint/edittime"
      common.mmk_Loading(0);
      common.fly_post(api,
        {
          project_order_id: this.project_id,  //预约单id
          order_id: this.order_id,  //订单id
          appointment_time: this.date,
        },
        msg => {
          common.mmk_Loading(1);
          let res = msg.data;
          if (res.status_code == 0) {
            common.mmk_Loading(2, res.msg);
            if (this.mark == 2) {
              this.project_id = res.data.id;
              this.getData()
            }
          }
        }
      );
    }
  }
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}

.wh() {
  width: 100%;
  height: 100%;
}

.bd() {
  border: 1px solid red;
}

.bg() {
  background: #888888;
}
.hidden {
  display: none;
}
.delt {
  position: relative;
  left: 35px;
}
.refund {
  width: 70px;
  height: 32px;
  border-radius: 16px;
  border: 1px solid rgba(102, 102, 102, 1);
  line-height: 32px;
  text-align: center;
}
.text() {
  position: relative;
  height: 20px;
  font-size: 14px;
  color: #999999;
  line-height: 20px;
  text-align: center;
  top: 226px;
}
.loc_image {
  width: 30px;
  height: 30px;
  position: relative;
  top: -1px;
  left: -10px;
}
.container {
  width: 100%;
  height: 100%;
  background: #f3f4f6;
  position: relative;
  .mask {
    width: 100%;
    height: 100%;
    background: rgba(51, 51, 51, 0.5);
    position: absolute;
    z-index: 99;
  }
  .modalbox {
    width: 280px;
    height: 164px;
    background: rgba(255, 255, 255, 1);
    border-radius: 8px;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 100;
    .content {
      width: 100%;
      height: 118px;
      font-size: 16px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 29px;
      box-sizing: border-box;
      padding: 33px 45px 0;
      border-bottom: 1px solid #d9d9d9;
      .red {
        color: #ff383e;
      }
    }
    .left,
    .right {
      height: 44px;
      width: 49.5%;
      font-size: 17px;
      line-height: 44px;
      display: inline-block;
    }
    .left {
      color: #666;
      border-right: 1px solid #d9d9d9;
    }
    .right {
      color: #f64665;
    }
  }
  .contentbox {
    border-top: 1px solid #ddd;
    background: #fff;
    box-sizing: border-box;
    padding-left: 10px;
    padding-top: 10px;
    width: 100%;
    height: 127px;
    .top-box {
      .p1 {
        margin-bottom: 10px;
        .s1 {
          font-size: 12px;
          color: #666666;
        }
        .s2 {
          float: right;
          color: #ff383e;
          font-size: 12px;
          font-weight: bold;
          margin-right: 10px;
        }
      }
    }
    .center-box {
      height: 80px;
      padding-bottom: 10px;
      display: flex;
      .left {
        float: left;
        width: 21.4%;
        height: 80px;
        img {
          .wh;
        }
      }
      .right {
        position: relative;
        float: right;
        width: 68%;
        height: 80px;
        box-sizing: border-box;
        padding-left: 10px;
        p {
          &.p1 {
            font-size: 14px;
            font-weight: bold;
            color: #444444;
            line-height: 20px;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            text-indent: 10px;
          }
          &.p2 {
            position: absolute;
            font-size: 12px;
            color: #999999;
            left: 0;
            bottom: 4px;
            height: 15px;
            margin-left: 10px;
            .s1 {
              font-size: 12px;
              color: #ff383e;
            }
            .s2 {
              font-size: 16px;
              font-weight: bold;
              color: #ff383e;
              .s3 {
                font-size: 10px;
              }
            }
          }
        }
      }
    }
  }
  .bottom-box {
    padding-left: 10px;
    padding-top: 10px;
    height: 73px;
    background: #fff;
    box-sizing: border-box;
    margin-top: 1px;
    // border-top: 1px solid #f3f4f6;
    // border-bottom: 1px solid #F3F4F6;
    .left-box {
      width: 50px;
      height: 100%;
      float: left;
      .img-box {
        img {
          display: block;
          margin: auto;
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
      }
    }
    .right-box {
      width: 300px;
      height: 100%;
      float: right;
      position: relative;
      .p1 {
        font-size: 14px;
        font-weight: bold;
        color: #444444;
        width: 100%;
        height: 25px;
        position: relative;
        span {
          display: inline-block;
          &.s1 {
            float: left;
          }
          &.s2 {
            width: auto;
            height: 15px;
            font-size: 10px;
            color: #fff;
            line-height: 15px;
            border-radius: 11px;
            padding: 0px 8px 0px 10px;
            text-align: right;
            background: rgba(255, 152, 108, 1);
            box-shadow: 0px 1px 1px 0px rgba(255, 91, 118, 0.42);
            float: right;
            margin-right: 10px;
            position: relative;
            // right: 3%;
            // top: 4%;
            .v-tip {
              width: 17px;
              height: 17px;
              border-radius: 50%;
              line-height: 15px;
              font-size: 12px;
              color: #fff;
              text-align: center;
              background: linear-gradient(
                314deg,
                rgba(255, 170, 105, 1) 0%,
                rgba(255, 57, 124, 1) 100%
              );
              box-shadow: 0px 1px 2px 0px rgba(255, 98, 117, 0.61);
              position: absolute;
              left: -8px;
              top: -4%;
            }
          }
        }
      }
      .p2 {
        position: relative;
        // margin-top: 10px;
        width: 100%;
        height: 45px;
        span {
          display: inline-block;
          &.s1 {
            position: relative;
            width: 15px;
            height: 15px;
            top: -17px;
            left: 0;
          }
          &.s2 {
            width: 90%;
            height: 20px;
            font-size: 12px;
            color: #888888;
            line-height: 17px;
            position: absolute;
            top: 6px;
            left: 14px;
          }
        }
      }
    }
  }
  .msg-box {
    margin-top: 10px;
    background-color: #fff;
    padding: 5px 10px;
    li {
      border: 1px solid #fff;
      width: 100%;
      height: 30px;
      box-sizing: border-box;
      position: relative;
      &.line {
        border-top: 1px solid #e0e0e0;
        // margin-bottom: 70px;
      }

      &.bottomLine ::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 1px;
        background-color: #e6e6e6;
        bottom: 0;
        left: 0;
      }
      span {
        display: inline-block;
        height: 100%;
      }
      .sL {
        float: left;
        font-size: 12px;
        font-weight: bold;
        color: #444444;
        line-height: 25px;
      }
      .sR {
        float: right;
        font-size: 12px;
        color: #666666;
        line-height: 25px;
        &.color {
          font-size: 16px;
          font-weight: bold;
          color: #ff383e;
          .item1 {
            font-size: 12px;
            margin-left: -3px;
          }
        }
        &.color1 {
          font-size: 16px;
          font-weight: bold;
          color: #ff7100;
        }
        &.color2 {
          color: #ff383e;
          font-size: 12px;
          .item {
            font-size: 10px;
          }
        }
      }
    }
  }
  .zhanwei {
    width: 100%;
    height: 70px;
    background-color: #f3f4f6;
  }
  .ul {
    width: 100%;
    height: 47px;
    background-color: #fff;
    margin-bottom: 10px;
    border-top: 1px solid #f3f4f6;
    .item {
      width: 100%;
      height: 47px;
      line-height: 47px;
      box-sizing: border-box;
      padding: 0 15px;
      color: #333;
      float: left;
      .left {
        font-size: 12px;
      }
      .right {
        float: right;
        .docImg {
          width: 35px;
          height: 35px;
          border-radius: 50%;
          vertical-align: middle;
        }
      }
    }
  }
  .footer-box {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 49px;
    background: #ffffff;
    box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.07);
    display: flex;
    justify-items: center;
    align-items: center;
    vertical-align: middle;
    .dt {
      flex: 1;
      &.msgDataMsg {
        padding: 5px 10px;
        font-size: 12px;
        color: #666666;
        box-sizing: border-box;
        padding-top: 0;
      }
    }
    .right {
      height: 100%;
      width: 64%;
      box-sizing: border-box;
      display: inline-block;
      position: relative;
      .item {
        float: right;
        box-sizing: border-box;
        padding-top: 12px;
        margin-right: 10px;
        &.itembtn {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          position: absolute;
          top: -85px;
          right: 15px;
          padding-top: 0;
          margin-right: 0;
        }
        &.fixtime {
          position: relative;
        }
        .btn {
          width: 78px;
          height: 25px;
          font-size: 12px;
          background: #fff;
          border: 1px solid #f64665;
          color: #f64665;
          border-radius: 13px;
          line-height: 25px;
          z-index: 2;
          &.morebooking {
            background: #ff383e;
            color: #fff;
          }
          &.btn::after {
            border: none;
          }
          &.service {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: url("https://img.ameimeika.com/h5_images/mp_images/mp_2.9/service.png")
              no-repeat;
            background-size: 100% 100%;
            border: none;
            padding: 0;
          }
        }
        &.moreDV {
          position: relative;
          .more-box {
            width: 70px;
            height: 77px;
            font-size: 12px;
            color: #fff;
            line-height: 42px;
            text-align: center;
            background-image: url("https://h5.ameimeika.com/mp_images/mp_2.4/booking/dialog@2x.png");
            background-size: 100% 100%;
            position: absolute;
            top: -192%;
            left: 0;
            z-index: 999;
            .dv {
              width: 100%;
              height: 34px;
              line-height: 34px;
              background-color: transparent;
              font-size: 12px;
              color: #fff;
              &.dv1 {
                border: 0;
                border-bottom: 1px solid #666;
              }
              &.dv1::after {
                border: none;
              }
            }
          }
        }
      }
    }
  }
}
.section {
  width: 50%;
  height: 44px;
  // background: red;
  // opacity: 0.5;
  position: absolute;
  z-index: 999;
  color: transparent;
  bottom: 0;
  right: 0;
}
.picker {
  width: 100%;
  height: 44px;
  z-index: 999;
}
</style>


